<gm:page title="Pleasant View City - Community Input" authenticate="true" gadget="true" onload="switchMap()">

  <!--
    The map wiki application demonstrates the the ability to use the
    map object to create wiki like experience for maps.
    @author: GME Team & Valery Hronusov aka Valery35 - verified CAG r81
  -->
   <form>

  <a id="signInLink" href="#" onclick="">Sign in to add entries</a>
  <!-- <div align="right" style="padding-top:20px"><gm:subscribe data="${myList}"/></div> -->


    <input type="text" size="50" id="addressInput" name="address" value="North Odgen, Utah" />
    <input type="button" onclick="showAddress(this.form.address.value)" value="Go!" />
  </form>
  <table style="width:100%">
    <tr>
      <td align="left" style="padding:20 20 20 0;">
        <gm:map id="myMap" data="${myList}" control="large"
            infotemplate="myMapDetailsTemplate" width="100%" height="400px"
            lat="39.8498313550914" lng="-111.96978092193604" zoom="7" maptypes="true" create="true">
          <gm:handleEvent src="myList"/>
         </gm:map>
      </td>
    </tr>
  </table>
  <table style="width:100%">
    <tr>
  <td valign="top" align="left" style="padding:20 20 20 0;">
  <gm:list id="myList" data="${app}/items3" template="myListTemplate" pageSize="10" sort="time">
    <gm:sort ref="atom:updated" name="time" reverse="true"/>
    <gm:sort ref="atom:title" name="title" reverse="false"/>
    <gm:sort ref="gd:email" name="email" reverse="false"/>
    <gm:sort ref="gd:event" name="event" reverse="false"/>
    <gm:sort ref="gd:representing" name="representing" reverse="false"/>
  </gm:list>
    </td>
    </tr>
  </table>

  <script type="text/javascript">
     function switchMap() {
     if (google.mashups.isUserAuthenticated()) {
        document.getElementById('signInLink').style.display = 'none';
      } else {
        document.getElementById('signInLink').href = google.mashups.properties['loginURL'];
      }
        var map = google.mashups.getObjectById("myMap").getMap();

        map.setMapType(map.getMapTypes()[2]);
        map.enableDoubleClickZoom();

        map.enableGoogleBar();
      }
    function showAddress(address) {
      var map = google.mashups.getObjectById('myMap').getMap();
      var mapData = google.mashups.getObjectById('myMap').getData();
      var geocoder = new GClientGeocoder();


      geocoder.getLatLng(address,
        function(point) {
          if (!point) {
            alert(address + " not found");
          } else {

            map.setCenter(point, 17);
          }
        }
      );
    }


  </script>

  <gm:template id="myMapDetailsTemplate">
    <table style="width:300px">
      <tr>
        <td colspan="2">Name: <gm:text ref="atom:title"/></td>
      </tr>
      <tr>
        <td colspan="2">Email: <gm:text ref="gd:email"/></td>
      </tr>
      <tr>
          <td>Topic: <gm:select ref="gd:event">
            <gm:option value="Administration" selected="true">Administration</gm:option>
            <gm:option value="Animal Control">Animal Control</gm:option>
            <gm:option value="Garbage">Garbage</gm:option>
            <gm:option value="Fire/Police">Fire/Police</gm:option>
            <gm:option value="Code Enforcement">Code Enforcement</gm:option>
            <gm:option value="Parks/Rec">Parks/Rec</gm:option>
            <gm:option value="Planning/Zoning">Planning/Zoning</gm:option>
            <gm:option value="Streets">Streets</gm:option>
            <gm:option value="Water/Sewer">Water/Sewer</gm:option>
            <gm:option value="Other">Other</gm:option>
          </gm:select></td>
          <td>Representing: <gm:select ref="gd:representing">
            <gm:option value="Resident" selected="true">Resident</gm:option>
            <gm:option value="Business">Business</gm:option>
            <gm:option value="Elected Official">Elected Official</gm:option>
            <gm:option value="Commuter">Commuter</gm:option>
            <gm:option value="Cyclist">Cyclist</gm:option>
            <gm:option value="Senior">Senior</gm:option>
            <gm:option value="Trucker">Trucker</gm:option>
            <gm:option value="Tourist">Tourist</gm:option>
            <gm:option value="Other">Other</gm:option>
          </gm:select></td>
      </tr>
      <tr>
        <td colspan="2">Comment: <gm:textarea ref="atom:content"/></td>
      </tr>
      <tr>
        <td colspan="2"><gm:editButtons editonly="true" text="true"/></td>
      </tr>
    </table>
  </gm:template>

  <gm:template id="myListTemplate">
    <table class="blue-theme" style="width:100%">
      <thead>
        <tr>
          <td style="width:40px"></td>
          <td class="gm-header" style="width:110px"><gm:header sort="event">Topic</gm:header></td>
          <td class="gm-header" style="width:110px"><gm:header sort="representing">Representing</gm:header></td>
          <td class="gm-header"><gm:header sort="title">Name</gm:header></td>
          <td class="gm-header" style="width:110px"><gm:header sort="email">Email</gm:header></td>
          <td class="gm-header" style="width:110px"><gm:header sort="time">UTM</gm:header></td>
          <td style="width:45px"></td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4"><gm:pager/></td>
          <td colspan="2" align="right"><gm:create label="Add"/></td>
        </tr>
      </tfoot>
      <tbody repeat="true">
        <tr>
          <td align="center"><gm:toggle/></td>
         <td><gm:select ref="gd:event">
            <gm:option value="Administration" selected="true">Administration</gm:option>
            <gm:option value="Animal Control">Animal Control</gm:option>
            <gm:option value="Garbage">Garbage</gm:option>
            <gm:option value="Fire/Police">Fire/Police</gm:option>
            <gm:option value="Code Enforcement">Code Enforcement</gm:option>
            <gm:option value="Parks/Rec">Parks/Rec</gm:option>
            <gm:option value="Planning/Zoning">Planning/Zoning</gm:option>
            <gm:option value="Streets">Streets</gm:option>
            <gm:option value="Water/Sewer">Water/Sewer</gm:option>
            <gm:option value="Other">Other</gm:option>
          </gm:select></td>
          <td><gm:select ref="gd:representing">
            <gm:option value="Resident" selected="true">Resident</gm:option>
            <gm:option value="Business">Business</gm:option>
            <gm:option value="Elected Official">Elected Official</gm:option>
            <gm:option value="Commuter">Commuter</gm:option>
            <gm:option value="Cyclist">Cyclist</gm:option>
            <gm:option value="Senior">Senior</gm:option>
            <gm:option value="Trucker">Trucker</gm:option>
            <gm:option value="Tourist">Tourist</gm:option>
            <gm:option value="Other">Other</gm:option>
          </gm:select></td>
          <td><gm:text ref="atom:title"/></td>
          <td><gm:text ref="gd:email"/></td>
          <td><gm:text ref="atom:updated" readonly="true"/></td>
          <td><gm:editButtons/></td>
        </tr>
        <tr class="gm-toggled">
          <td colspan="4">
            Comment: <gm:textarea ref="atom:content"/>
          </td>
        </tr>
      </tbody>
    </table>
  </gm:template>


  </gm:page>


